<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path;
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>工作详情-云校通-家长</title>
<jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
<body ontouchstart style="background: #FFFFFF;">
	<div class="weui-header"> 
		<div class="weui-header-left"> <a href="<%=basePath %>/ls/coordination/office" class="icon icon-109 f-black">返回</a></div>
		<h1 class="weui-header-title f-black">
			<fmt:parseDate value='${detail.workDate }' var='date2' pattern='yyyy/MM/dd'/>
			<fmt:formatDate value="${date2 }" type="date" dateStyle="full"/>
		</h1>
	</div>
	<div>
		<div class="weui_cells borderLeft xtbg-add-list" style="margin-top:0;">
            <div class="weui_cell " href="javascript:;">
                <div class="weui_cell_bd weui_cell_primary">
                    <p>发布人: ${detail.sender }</p>
                </div>
            </div>
            <div class="weui_cell">
				<div class="weui_cell_bd weui_cell_primary f-15">
					<p>${detail.content }</p>
				</div>
			</div>
            <div class="pb10">
            	<div class="weui_uploader_bd pl5">
					<ul class="weui_uploader_files gzbxs_pic" style="padding-left: 0;">
						<c:forEach var="item" items="${detail.attachList }">
							<c:if test="${item.attachmentType == 'image' }">
								<li class="weui_uploader_file" onclick="imgClick1(this)"><img src="${config.imgUrl }${item.attachmentUrl}"></li>
							</c:if>
						</c:forEach>
                    </ul>
                </div>
			</div>
			<div class="weui_cells xs_c_piclist p5">
                <div class="xs_c_picWrap clearfix">
					<c:forEach var="item" items="${detail.attachList }">
						<c:if test="${item.attachmentType != 'image' }">
							<div class="xtbg-upload-list mb10">
								<div class="xtbg-upload-list-inner">
									<p>${item.attachmentName}</p>
									<a href="${config.imgUrl}${item.attachmentUrl}" class="weui_btn weui_btn_mini weui_btn_primary f-white bg-blue">查看</a>
								</div> 
							</div>
						</c:if>
					</c:forEach>
				</div>
			</div>
       </div>
       
       <div class="page-bd xs_c_search mt10">
			<ul>
				<li class="xs_c_search-first" style="margin-bottom: 0;">
	                <div class="weui-flex js-category">
	                    <p class="weui-flex-item"><img class="middle" src="<%=basePath %>/images/weichakan.png"> 未完成(<span id="noReadCount"></span>)</p>
	                    <i class="icon icon-74"></i>
	                </div>
	                <div class="page-category js-categoryInner">
	                
	                    <ul class="list_5" id="noRead">
	                    </ul>
	                    
	                </div>
	            </li>
	            <li class="" style="margin-top:0;border-top: 1px #e0e0e0 solid;">
	                <div class="weui-flex js-category">
	                    <p class="weui-flex-item"><img class="middle" src="<%=basePath %>/images/yichakan.png"> 已完成(<span id="readedCount"></span>)</p>
	                    <i class="icon icon-74"></i>
	                </div>
	                <div class="page-category js-categoryInner">
	                
	                    <ul class="list_5" id="readed">
	                    </ul>
	                </div>
	            </li>
			</ul>
		</div>
	</div>

	<div class="bg-white pr10 f_15">
		<div class="weui_cell lblue">
             <div class="weui_cell_bd weui_cell_primary">
                 <p class="bold pr">工作反馈</p>
             </div>
         </div>
     </div>
     <div class="weui_panel weui_panel_access" style="margin-bottom: 55px;">
	    <div class="weui_panel_bd moments" id="officeList">
	        
	    </div>
     </div>
     <script id="feedback-table-template" type="text/x-handlebars-template">
			{{#each rows}}
				<div class="weui_cell moments__post" style="padding: 10px 5px;">
		          <div class="weui_cell_bd weui_media_bd" style="padding-left:0">
		            <p class="weui_media_desc" style="color:#999;">{{dateFormat updateTime}}</p>
		            <!-- post内容 -->
					<p class="paragraph" style="padding-top: 10px;">{{sendee}}老师：{{feedback}}</p>
		            <!-- 伸张链接 -->
		            <a class="paragraphExtender">全文</a>
		            <!-- 相册 -->
					<div class="thumbnails1 gzbxs_pic">
						{{#each sendeeAttachList}}
						   {{#equal attachmentType "image"}}
				           <div class="thumbnail1 img-click" onclick="imgClick1(this)">
								<img class="img-max" src="${config.imgUrl}{{attachmentUrl}}">
						   </div>
						   {{/equal}}
						{{/each}}
				    </div>
					<div class="pb10">
						{{#each sendeeAttachList}}
							{{#equal attachmentType "image"}}
							{{else}}
							<div class="xtbg-upload-list mb10">
								<div class="xtbg-upload-list-inner">
									<p>{{attachmentName}}</p>
									<a href="${config.imgUrl}{{attachmentUrl}}" class="weui_btn weui_btn_mini weui_btn_primary f-white bg-blue">查看</a>
								</div> 
							</div>
							{{/equal}}
						{{/each}}
					</div>
		          </div>
				</div>
			{{/each}}
		</script>   
</body>
<jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
<script type="text/javascript">
	$(function() {
		$('.js-category').click(function(){
			$parent = $(this).parent('li');
		    if($parent.hasClass('js-show')){
                $parent.removeClass('js-show');
                $(this).children('i').removeClass('icon-35').addClass('icon-74');
            }else{
                $parent.siblings().removeClass('js-show');
                $parent.addClass('js-show');
                $(this).children('i').removeClass('icon-74').addClass('icon-35');
                $parent.siblings().find('i').removeClass('icon-35').addClass('icon-74');
            }
	   });
	   readList();
	 //页数 
	    var page = 0;
	    // 每页展示5个
	    var size =5;
	    $('.weui_panel').dropload({
	        scrollArea : window,
	        autoLoad : true,//自动加载
	  		domDown : {//上拉
	            domClass   : 'dropload-down',
	            domRefresh : '<div class="dropload-refresh f15 "><i class="icon icon-20"></i>上拉加载更多</div>',
	            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>',
	            domNoData  : '<div class="dropload-noData">没有更多数据了</div>'
	        },
	        domUp : {//下拉
	            domClass   : 'dropload-up',
	            domRefresh : '<div class="dropload-refresh"><i class="icon icon-114"></i>上拉加载更多</div>',
	            domUpdate  : '<div class="dropload-load f15"><i class="icon icon-20"></i>释放更新...</div>',
	            domLoad    : '<div class="dropload-load f15"><span class="weui-loading"></span>正在加载中...</div>'
	        },
	        loadDownFn : function(me){//加载更多
		        page++;
				window.params = {
					page: page,
		  	 		rows: size,
		  	 		officeId: parseInt("${detail.id}")
				};	            
		       	$.ajax({
		          	url : basePath + "/ls/coordination/office/myPublish/feedback/page",
		  	 		type : "post",
		  	 		dataType : "json",
		  	 		data : window.params,
		            success: function(data){
		         		 if(data.rows.length == 0 || window.params.page*window.params.rows >= data.total) {// 如果没有数据
		                      // 锁定
		                      me.lock();
		                      // 无数据
		                      me.noData();
		                  }
		                  // 为了测试，延迟1秒加载
		                  setTimeout(function(){
		                  	loadFeedbackHtml(data);
		                  	paragraph();
		                    // 每次数据加载完，必须重置
		                     me.resetload();
		                  },200);
		              },
		              error: function(xhr, type){
		              }
		          });
	        }
	    });
	})
	function loadFeedbackHtml(data){
		if(data.rows.length > 0) {
 			var myTemplate = Handlebars.compile($("#feedback-table-template").html());
 			Handlebars.registerHelper("equal", function(v1,v2,options) {
 				if(v1 == v2) {
 					//满足添加继续执行
 					return options.fn(this);
 				}else {
 					//不满足条件执行{{else}}部分
 					return options.inverse(this);
 				}
 			});
 			Handlebars.registerHelper("dateFormat", function(v1) {
 				return getTime(v1, "yyyy-MM-dd hh:mm:ss");
 			});
 			$('#officeList').append(myTemplate(data));
 		}
	}
	function readList() {
		$.ajax({
      		url : basePath + "/ls/coordination/office/sendee/list",
	 		type : "post",
	 		dataType : "json",
	 		data : {
	 			officeId: parseInt("${detail.id}")
	 		},
	        success: function(data){
	        	if(data != null && data.length > 0) {
	        		var noReadHtml="", noReadCount=0, readedHtml="", readedCount=0;
	        		for(var i in data) {
	        			var itm = data[i];
	        			var str = "<li>" + itm.sendee + "老师</li>";
	        			if(itm.isFinished == 1) {
	        				readedCount++;
	        				readedHtml += str;
	        			}else {
	        				noReadCount++;
	        				noReadHtml += str;
	        			}
	        		}
	        		$("#noRead").html(noReadHtml);
	        		$("#noReadCount").html(noReadCount);
	        		$("#readed").html(readedHtml);
	        		$("#readedCount").html(readedCount);
	        	}
	        },
	        error: function(xhr, type){
	              
	        }
	      });
	}
	function paragraph() {
		$("#officeList .moments__post").each(function(i, v) {
			//定义文本
			const paragraph = $($(this).find('.paragraph'));
			const paragraphText = paragraph.text();
			const paragraphLength = paragraph.text().length;
			//定义文章长度
			const maxParagraphLength = 80;
			//定义全文按钮
			const paragraphExtender = $($(this).find('.paragraphExtender'));
			var toggleFullParagraph = false;
			
			//定义全文按钮
			if (paragraphLength < maxParagraphLength) {
			  paragraphExtender.hide();
			} else {
			  paragraph.html(paragraphText.substring(0, maxParagraphLength) + '...');
			  paragraphExtender.click(function(){
			    if (toggleFullParagraph) {
			      toggleFullParagraph = false;
			      paragraphExtender.html('全文');
			      paragraph.html(paragraphText.substring(0, maxParagraphLength) + '...');
			    } else {
			      toggleFullParagraph = true;
			      paragraphExtender.html('收起');
			      paragraph.html(paragraphText);
			    }
			  });
			};
		});
   }
	function imgClick1(thiz) {
		var obj = $(thiz.closest(".gzbxs_pic")).find("img");
		var src = get_img(obj);
		var currSrc = thiz.children[0].src;
		var current;
		for(var i in src) {
			if(src[i] == currSrc) {
				current = i;
				break;
			}
		}
		img_preview(src[current], src);
	}
	function img_preview(current, urls){
	    if(!current || urls.length == 0){
	        return ;
	    }
	
	    WeixinJSBridge.invoke('imagePreview', { 
	        'current': current,
	        'urls': urls
	    }); 
	}
	function get_img(obj){
		var m = [];
		for(var i=0; i<obj.length; i++){
			m[i] = obj[i].src;
		}
		return m;
	}
</script>
</html>